<template>
  <div class="photolist">
    <van-tabs @click="handleClickTab">
      <van-tab v-for="cate in cates" :title="cate.title" :key="cate.id"></van-tab>
    </van-tabs>

    <div class="wrapper" ref="wrapper">
        <div>
          <div v-if="images.length===0">暂无数据</div>
          <ul class="image-box" v-else>
            <li v-for="image in images" :key="image.id">
              <img v-lazy="image.img_url" alt="" @click="photoInfo(image.id)"/>
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data: () => ({
    cates: [],
    images: [],
    options: {
      //  是否开启纵向滚动
      scrollY: {
        type: Boolean,
        default: false
      },
      click: true
    }
  }),
  created () {
    this.getimgcategory()
    this.getimages(0)
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, this.options)
    })
  },
  methods: {
    async getimgcategory () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getimgcategory')
      if (status !== 0) this.$Toast(message)
      message.unshift({
        id: 0,
        title: '全部'
      })
      this.cates = message
    },
    async getimages (id) {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getimages/' + id)
      if (status !== 0) this.$Toast(message)
      this.images = message
      console.log(message)
    },
    handleClickTab (id) {
      this.getimages(id)
    },
    photoInfo (id) {
      this.$router.push('/home/photoinfo/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
  .wrapper{
    overflow: hidden;
    height: 527px;
  }
  .image-box{
    width: 100%;
    height: 100%;

    li{
      img{
        width: 375px;
      }
    }
  }
</style>
